<template>
    <view class="container">
        <!-- <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view> -->

        <!-- 顶部背景区域 -->
        <view class="header-section">
            <image class="header-bg"
                src="https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250125/7be18ea91109d91fb1e2c13c85a18573.jpg"
                mode="aspectFill"></image>

            <!-- 客服导航 -->
            <view class="custom-nav">
                <view class="nav-content">
                    <view class="service-btn">
                        <image src="../static/assets/service.png" mode="aspectFit" class="service-icon"></image>
                        <text>在线客服</text>
                    </view>
                </view>
            </view>

            <view class="custom-nav" @tap="goToOrder">
                <view class="nav-content">
                    <view class="service-btn">
                        <image src="../static/assets/order.png" mode="aspectFit" class="service-icon"></image>
                        <text>我的订单</text>
                    </view>
                </view>
            </view>

            <!-- 折扣信息 -->
            <view class="discount-info">
                <text class="discount">8.8折起</text>
                <text class="promotion-text">钜惠享不停天天好心情</text>
                <text class="order-tip">马上下单，立享优惠~</text>
            </view>
        </view>

        <view class="content">
            <!-- 点餐方式选择 -->
            <view class="order-methods">
                <view class="method-item" @tap="goToStore">
                    <view class="method-icon">
                        <image src="../static/assets/drink.png" mode="aspectFit"></image>
                    </view>
                    <text class="method-title">到店自取</text>
                    <text class="method-desc">预约下单，到店领走</text>
                </view>
                <view class="method-item disabled" @tap="goToDelivery">
                    <view class="method-icon">
                        <image src="../static/assets/delivery.png" mode="aspectFit"></image>
                    </view>
                    <text class="method-title">外卖到家</text>
                    <text class="method-desc">升级改造中，暂未开放</text>
                </view>
            </view>

            <!-- 底部提示 -->
            <view class="bottom-tips">
                <text>本产品为第三方代点餐服务</text>
                <text>即第三方平台代下单服务,与霸王茶姬官方无关</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            statusBarHeight: 0,
            currentCity: '在线客服',
        }
    },
    onLoad() {
        uni.getSystemInfo({
            success: (res) => {
                this.statusBarHeight = res.statusBarHeight
            }
        })
    },
    methods: {
        showCityPicker() {
            // 这里可以跳转到客服页面
        },
        goToStore() {
            // 跳转到门店自取页面
            uni.navigateTo({
                url: '/pagesZone/drink/store'
            })
        },
        goToDelivery() {
            // 跳转到外卖配送页面  
        },
        goToOrder() {
            // 跳转到我的订单页面
            uni.navigateTo({
                url: '/pagesZone/drink/order'
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    min-height: 100vh;
    // background-color: #FF0000;
}

.header-section {
    position: relative;
    height: 500rpx;
    overflow: hidden;

    .header-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
}

.custom-nav {
    position: relative;
    z-index: 2;
    padding: 20rpx 0;

    .nav-content {
        display: flex;
        justify-content: flex-end;
    }

    .service-btn {
        display: flex;
        align-items: center;
        background: #FFFFFF;
        border-radius: 40rpx 0 0 40rpx;
        padding: 12rpx 30rpx 12rpx 24rpx;
        margin-right: 0;

        .service-icon {
            width: 32rpx;
            height: 32rpx;
            margin-right: 10rpx;
        }

        text {
            font-size: 26rpx;
            color: #333333;
            font-weight: 500;
        }
    }
}

.discount-info {
    position: relative;
    z-index: 2;
    padding: 0 40rpx;
    color: #FFFFFF;

    .discount {
        display: block;
        font-size: 80rpx;
        font-weight: bold;
        margin-bottom: 20rpx;
    }

    .promotion-text {
        display: block;
        font-size: 32rpx;
        margin-bottom: 20rpx;
    }

    .order-tip {
        display: block;
        font-size: 28rpx;
    }
}

.content {
    position: relative;
    z-index: 2;
    padding: 40rpx;
    margin-top: -60rpx;
}

.order-methods {
    display: flex;
    justify-content: space-between;
    gap: 20rpx;

    .method-item {
        flex: 1;
        background: #FFFFFF;
        border-radius: 20rpx;
        padding: 30rpx 20rpx;
        text-align: center;

        .method-icon {
            width: 60rpx;
            height: 60rpx;
            margin: 0 auto 20rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .method-title {
            display: block;
            font-size: 32rpx;
            font-weight: bold;
            margin-bottom: 10rpx;
            color: #333;
        }

        .method-desc {
            display: block;
            font-size: 24rpx;
            color: #999;
        }

        &.disabled {
            // background: #cac6c6;

            .method-icon image {
                filter: grayscale(100%);
            }
        }
    }
}

.bottom-tips {
    position: fixed;
    bottom: 40rpx;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(157, 150, 150, 0.6);
    font-size: 24rpx;

    text {
        display: block;
        line-height: 1.8;
    }
}
</style>